.page-container {
    padding: 20px;
    background-color: #f5f7fa;

    .main-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 10px;

        //公共部分
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 16px 24px;
            border-bottom: 1px solid #E6EBF5;

            h2 {
                font-size: 18px;
                color: #333;
                margin: 0;
            }
        }

        .content-consumption, .energy-section, .content-center {
            display: flex;
            flex-direction: row;
            gap: 10px;

            .energy-cards {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                padding: 0 24px 16px 24px;
                gap: 10px;

                .energy-card {
                    flex: 1 1 calc(50% - 5px);
                }
            }

            &--left, &--right {
                display: flex;
                flex-direction: column;
                flex: 1;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                background: #fff;
            }
        }

        .content-center {
            display: flex;
            flex-direction: row;
            gap: 10px;

            &--left, &--right {
                background: unset;
                display: flex;
                flex: unset;
                flex-direction: column;
            }

            &--left, &--right {
                width: calc(34.16% - 5px);
                gap: 10px;
                box-shadow: unset;

                .section-header {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 10px;
                }

                .left-top, .left-bottom, .right-top, .right-bottom {
                    padding-bottom: 16px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                    background: #fff;

                    .rank-tabs {
                        width: 100%;
                        padding: 0 24px;

                        ::v-deep.time-tab {
                            flex: 1;
                        }
                    }
                }

                //背景填满
                .left-bottom,.right-bottom{
                    display: flex;
                    flex: 1;
                    flex-direction: column
                }
            }

            &--right {
                width: calc(65.84% - 5px);

                .energy-section-query {
                    .el-form-item {
                        margin-bottom: 0 !important;
                    }
                }

                .content-query {
                    display: flex;
                    flex-direction: column;
                    padding: 0 24px;

                    &-tabs {
                        display: flex;
                        flex-direction: row;
                        gap: 20px;
                    }

                    .query-table {
                        margin-top: 16px;

                        .el-button > span svg {
                            margin-right: 6px;
                        }
                    }
                }

                .price-box {
                    display: flex;
                    flex-direction: row;
                    padding: 0 24px 16px 24px;

                    .price-group {
                        padding: 12px 16px;
                        border: 1px solid #DCDFE6;
                        flex: 1;

                        .price-header {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            margin-bottom: 15px;
                            font-size: 14px;
                            font-weight: bold;
                            color: #333;

                            .price-icon {
                                width: 4px;
                                height: 16px;
                            }

                        }

                        .price-value {
                            font-size: 18px;
                            font-weight: bold;
                            color: #333;

                            > span {
                                font-weight: normal !important;
                                font-size: 10px;
                            }
                        }

                    }
                }
            }
        }

        .content-footer{
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            background: #fff;

            .query-table {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 0 24px;
            }

            .content-table {
                padding: 0 24px;

                .table-pagination {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    padding: 20px 24px;
                }
            }
        }
    }
}
